<template>
  <ContentWrap>
    <el-form :model="queryParams" ref="queryFormRef" :inline="true">
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入姓名"
          :clearable="true"
          @keyup.enter="getPage"
        />
      </el-form-item>
      <el-form-item label="身份证号" prop="identityCard">
        <el-input
          v-model="queryParams.identityCard"
          placeholder="请输入身份证号"
          :clearable="true"
          @keyup.enter="getPage"
        />
      </el-form-item>
      <el-form-item label="登记入住日期" prop="checkinDate">
        <el-date-picker
          v-model="queryParams.checkinDate"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button v-hasPermi="['fee:deposit:query']" @click="handleClickSearch">
          <Icon icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="handleClickReset">
          <Icon icon="ep:refresh" />
          重置
        </el-button>
        <el-button v-hasPermi="['fee:deposit:create']" @click="handleClickCreate">
          <Icon icon="ep:plus" />
          交押金
        </el-button>
      </el-form-item>
    </el-form>
    <Table
      :columns="columns"
      :page-param="queryParams"
      :adaptive="true"
      :page-data="queryData"
      save-key="FeeDeposit"
      height-per="90"
      @page-change="getPage"
      @row-click="handleRowClick"
    >
      <template #menu="{ row }">
        <context-menu-item
          label="查询押金详情"
          @click="handleClickQueryDetail(row)"
          v-hasPermi="['fee:deposit:queryDetail']"
        />
      </template>
    </Table>
  </ContentWrap>
  <FeeDepositCreate ref="createFormRef" @success="getPage" />
  <FeeDepositDetail ref="detailFormRef" @success="getPage" />
</template>
<script setup name="FeeDeposit" lang="ts">
import FeeDepositCreate from './FeeDepositCreate.vue'
import FeeDepositDetail from './FeeDepositDetail.vue'
import * as FeeDepositApi from '@/api/fee/feeDeposit'
const detailFormRef = ref()
const createFormRef = ref()
const tableCurrentRow = ref()
const queryFormRef = ref()
const queryParams = ref({
  name: undefined,
  identityCard: undefined,
  checkinDate: undefined
})
const queryData = ref()
const columns = [
  {
    label: '姓名',
    prop: 'elder.name'
  },
  {
    label: '身份证号',
    prop: 'elder.identityCard'
  },
  {
    label: '登记入住日期',
    prop: 'elder.checkinDate'
  },
  {
    label: '押金总和',
    prop: 'totalDeposit'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  }
]
/** 初始化 */
onMounted(() => {
  getPage()
})

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 查询押金详情按钮操作 */
const handleClickQueryDetail = (row) => {
  detailFormRef.value.open(row.id)
}

/** 交押金按钮操作 */
const handleClickCreate = () => {
  createFormRef.value.open()
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await FeeDepositApi.pageQuery(queryParams.value)
}

/** table行点击事件 */
const handleRowClick = (row) => {
  tableCurrentRow.value = row
}
</script>
